<script setup>
import { computed, onMounted, ref } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { getIndexBannerService, getHotSceneryService, getHotHotelService, getHotRestaurantService, getHotPostService } from '@/apis/index.js'
import SwiperComponent from '@/components/SwiperComponent/SwiperComponent.vue'
import CardContainer from '@/pages/index/components/CardContainer.vue'
import CustomNavbarVue from '@/pages/index/components/CustomNavbar.vue'

// 页面滚动位置
const scrollTop = ref(0)

// 判断页面是否滚动
const isScroll = ref(false)

// 存储首页轮播图数据
const indexBannerList = ref([])

// 存储热门景点数据
const hotSceneryList = ref([])

// 存储热门酒店数据
const hotHotelList = ref([])

// 存储热门餐厅数据
const hotRestaurantList = ref([])

// 存储热门攻略数据
const hotPostList = ref([])

// 获取首页轮播图数据
const getIndexBanner = async () => {
	const res = await getIndexBannerService()
	indexBannerList.value = res.data
}

// 获取首页热门景点数据
const getHotScenery = async () => {
	const res = await getHotSceneryService()
	hotSceneryList.value = res.data
}

// 获取首页热门酒店数据
const getHotHotel = async () => {
	const res = await getHotHotelService()
	hotHotelList.value = res.data
}

// 获取首页热门餐厅数据
const getHotRestaurant = async () => {
	const res = await getHotRestaurantService()
	hotRestaurantList.value = res.data
}

// 获取首页热门攻略数据
const getHotPost = async () => {
	const res = await getHotPostService()
	hotPostList.value = res.data
}

// 监听页面滚动
onPageScroll((e) => {
	scrollTop.value = e.scrollTop
	if (scrollTop.value > 160) {
		isScroll.value = true
	} else {
		isScroll.value = false
	}
})

// 页面加载时调用的函数
onLoad(() => {
	getIndexBanner()
	getHotScenery()
	getHotHotel()
	getHotRestaurant()
	getHotPost()
})

// 定义导航宫格的映射列表用于渲染图标
const swiperList = [
	[
		{
			icon: 'icon-lvyou',
			name: '景点',
			navigation: 'scenery',
			color: '#8175fd'
		},
		{
			icon: 'icon-jiudian',
			name: '酒店',
			navigation: 'hotel',
			color: '#2ab2fe'
		},
		{
			icon: 'icon-cantingcaipin',
			name: '餐厅',
			navigation: 'restaurant',
			color: '#05ce70'
		},
		{
			icon: 'icon-gonglve',
			name: '攻略',
			navigation: 'post',
			color: '#fd844d'
		},
		{
			icon: 'icon-chengshiguanguang',
			name: '城市观光',
			type: 'scenery',
			navigation: '城市观光',
			color: '#ffad22'
		},
		{
			icon: 'icon-jingqumenpiao',
			name: '人文古迹',
			type: 'scenery',
			navigation: '人文古迹',
			color: '#fc6561'
		},
		{
			icon: 'icon-ziranfengguang',
			name: '自然风光',
			type: 'scenery',
			navigation: '自然风光',
			color: '#00c3a2'
		},
		{
			icon: 'icon-wanghongdaka',
			name: '网红打卡',
			type: 'scenery',
			navigation: '网红打卡',
			color: '#4da4fa'
		},
		{
			icon: 'icon-zhanguan',
			name: '展览展馆',
			type: 'scenery',
			navigation: '展览展馆',
			color: '#f697cd'
		},
		{
			icon: 'icon-jingjifazhan',
			name: '经济型',
			type: 'hotel',
			navigation: '经济型',
			color: '#69dcbe'
		},
		{
			icon: 'icon-tehuizhuanqu-3',
			name: '特惠型',
			type: 'hotel',
			navigation: '特惠型',
			color: '#ee9d6b'
		},
		{
			icon: 'icon-kaitongVIP-haohuaban',
			name: '豪华型',
			type: 'hotel',
			navigation: '豪华型',
			color: '#f3c74e'
		}
	],
	[
		{
			icon: 'icon-dingminsu',
			name: '民宿',
			type: 'hotel',
			navigation: '民宿',
			color: '#7500d9'
		},
		{
			icon: 'icon-kezhangongyu',
			name: '公寓',
			type: 'hotel',
			navigation: '公寓',
			color: '#6fad38'
		},
		{
			icon: 'icon-zhongcan1',
			name: '中餐',
			type: 'restaurant',
			navigation: '中餐',
			color: '#bb4a13'
		},
		{
			icon: 'icon-xicanting',
			name: '西餐',
			type: 'restaurant',
			navigation: '西餐',
			color: '#dd4df4'
		},
		{
			icon: 'icon-xiaochi',
			name: '特色小吃',
			type: 'restaurant',
			navigation: '特色小吃',
			color: '#e7252b'
		},
		{
			icon: 'icon-zizhucan1',
			name: '自助餐',
			type: 'restaurant',
			navigation: '自助餐',
			color: '#4082c8'
		},
		{
			icon: 'icon-kuaican',
			name: '快餐',
			type: 'restaurant',
			navigation: '快餐',
			color: '#57e2ea'
		}
	]
]

// 点击导航图标跳转页面
const onClickGrid = (navigation, type) => {
	if (type) {
		uni.navigateTo({
			url: `/ComprehensivePackage/List/List?type=${type}&filter_type=${navigation}`
		})
	} else {
		uni.navigateTo({
			url: `/ComprehensivePackage/List/List?type=${navigation}`
		})
	}
}
</script>

<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbarVue :isScroll="isScroll"></CustomNavbarVue>

		<!-- 首页轮播图 -->
		<view class="carousel">
			<SwiperComponent :list="indexBannerList"></SwiperComponent>
		</view>

		<!-- 首页快速导航列表 -->
		<swiper class="swiper">
			<swiper-item>
				<up-grid :border="false" col="4">
					<up-grid-item
						@click="onClickGrid(item.navigation, item.type)"
						:customStyle="{ width: '120rpx', height: '120rpx', marginBottom: '20rpx', borderRadius: index < 4 ? '40rpx' : '', backgroundColor: index < 4 ? item.color : '' }"
						v-for="(item, index) in swiperList[0]"
						:key="index"
					>
						<text :class="item.icon" class="iconfont" :style="{ color: index >= 4 ? item.color : '#ffffff', fontSize: '50rpx', paddingTop: '20rpx' }"></text>
						<text :style="{ padding: '10rpx 0 20rpx 0rpx', color: index >= 4 ? '' : '#ffffff' }">{{ item.name }}</text>
					</up-grid-item>
				</up-grid>
			</swiper-item>

			<swiper-item>
				<up-grid :border="false" col="3">
					<up-grid-item
						@click="onClickGrid(item.navigation, item.type)"
						:customStyle="{ width: '120rpx', height: '120rpx', marginBottom: '20rpx' }"
						v-for="(item, index) in swiperList[1]"
						:key="index"
					>
						<text :class="item.icon" class="iconfont" :style="{ fontSize: index >= 4 ? '50rpx' : '55rpx', paddingTop: '20rpx', color: item.color }"></text>
						<text :style="{ padding: '10rpx 0 20rpx 0rpx' }">{{ item.name }}</text>
					</up-grid-item>
				</up-grid>
			</swiper-item>
		</swiper>

		<!-- 热门景点、酒店、餐厅、攻略 -->
		<CardContainer :list="hotSceneryList" title="热门景点" bgColor="#eee5d3" color="#674615"></CardContainer>
		<CardContainer :list="hotHotelList" title="热门酒店" bgColor="#e5d6f5" color="#7843b1"></CardContainer>
		<CardContainer :list="hotRestaurantList" title="热门餐厅" bgColor="#e2fbc5" color="#6eb119"></CardContainer>
		<CardContainer :list="hotPostList" title="热门攻略" bgColor="#c3e7fe" color="#549fe6"></CardContainer>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;

	/* #ifndef MP-WEIXIN */
	.carousel {
		margin-top: 75rpx;
	}
	/* #endif */

	.swiper {
		height: 480rpx;
		margin-top: 10rpx;

		::v-deep .u-grid {
			justify-items: center;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 0;
			font-size: 26rpx;
		}
	}
}
</style>
